<template>
  <div id="h">
    <div id="header">
      <span>阿拉尔市疫苗接种管理系统客户端</span>
      <!-- <h2>阿拉尔市疫苗接种管理系统客户端</h2> -->
    </div>
    <div id="w">
      <!-- 轮播图 -->
      <el-carousel :interval="2000" arrow="always">
        <el-carousel-item v-for="item in tupian.child" :key="item.id">
          <a :href="item.href">
            <img
              class="image"
              v-bind:src="item.address"
              alt="没了！！"
              width="100%"
              height="auto"
            />
          </a>
        </el-carousel-item>
      </el-carousel>
      <!-- 预约，查询 -->
      <img
        src="../../assets/111.png"
        alt=""
        class="img1"
        style="width: 195px; height: 125px"
      />
      <img
        src="../../assets/接种chaxun.png"
        alt=""
        class="img2"
        style="width: 195px; height: 125px"
      />
      <el-row>
        <el-button id="yu" type="success" @click="yuyue" plain
          >疫苗预约</el-button
        >
        <el-button id="jie" type="success" @click="chaxun" plain
          >接种查询</el-button
        >
      </el-row>
      <div id="he"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: "",
      nameId: "",
      tupian: {
        child: [
          {
            id: "t1",
            address: require("../../assets/轮播1.png"),
            href: "https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner",
          },
          {
            id: "t2",
            address: require("../../assets/轮播2.png"),
            href: "https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner",
          },
          {
            id: "t3",
            address: require("../../assets/轮播3.png"),
            href: "https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner",
          },
          {
            id: "t4",
            address: require("../../assets/轮播4.png"),
            href: "https://m.thepaper.cn/baijiahao_13255432",
          },
        ],
      },
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    getParams: function () {
      this.uid = this.$route.query.nameId;
    },
    yuyue() {
      this.$router.push({ path: "/subscribe", query: { nameId: this.uid } });
    },
    chaxun() {
      this.$router.push({ path: "/queryvaccine", query: { nameId: this.uid } });
    },
  },
};
</script>

<style>
.el-carousel__container {
  height: 250px;
}
.el-carousel__item h3 {
  color: #9ea3aa;
  font-size: 18px;
  opacity: 0.75;
  /* line-height: 100px; */
  margin: 0;
}
.el-carousel {
  padding-bottom: 5px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
#w {
  position: relative;
  width: 400px;
  margin: 0 auto;
  padding-top: 5px;
  background-color: rgb(174, 214, 194);
}
#header {
  width: 100%;
  height: 50px;
  padding-top: 0;
  background-color: rgb(136, 219, 95);
}
#header span {
  line-height: 50px;
  font-size: 20px;
  color: #fff;
}
#w .img1 {
  float: left;
}
#w .img2 {
  float: right;
}
#w #yu {
  /* height: 40px;
  width: 100px; */
  position: absolute;
  top: 138px;
  left: 75px;
}
#w #jie {
  /* height: 40px;
  width: 100px; */
  position: absolute;
  top: 138px;
  right: 75px;
}
#h {
  width: 400px;
  margin: 0 auto;
}
#he {
  height: 50px;
  background-color: rgb(174, 214, 194);
  margin-top: 5px;
}
</style>
